html {
  --primary-color: #1677ff;
  --success-color: #52c41a;
  --error-color: #ff4d4f;
  --warning-color: #faad14;
  --vxe-primary-color: var(--primary-color);
  --vxe-success-color: var(--success-color);
  --vxe-error-color: var(--error-color);
  --vxe-warning-color: var(--warning-color);

  // text
  --text-color: rgba(0 0 0 / 85%);
  // border
  --border-color: #eee;
  // header
  --header-bg-color: #fff;
  --header-active-menu-bg-color: #273352;

  // app
  --app-content-background-color: #fafafa;

  // component
  --component-background-color: #fff;

  &[data-theme='dark'] {
    // text
    --text-color: #c9d1d9;
    // border
    --border-color: #303030;
    // header
    --header-bg-color: #151515;

    // app
    --app-content-background-color: #1e1e1e;
    // component
    --component-background-color: #151515;
  }
}

// @primary-color: var(--primary-color);
// @success-color: var(--success-color);
// @error-color: var(--error-color);
// @warning-color: var(--warning-color);

// ===========Base Color============
@white: #fff;
@content-bg: #f4f7f9;

@component-background: var(--component-background-color);

// ===========Text color============
@text-color-base: var(--text-color);
@text-color-secondary: #8b949e;

// =========border-color============
@border-color-base: var(--border-color);

// ===========Header color============
@header-bg-color-base: var(--header-bg-color);
@header-dark-bg-hover-color: #242424;
@header-light-bg-hover-color: #f6f6f6;
// top-menu
@top-menu-active-bg-color: var(--header-active-menu-bg-color);

// Auxiliary information color-dark
@text-color-help-dark: #909399;

// =================================
// =======app content color=========
// =================================
@app-content-background: var(--app-content-background-color);
